import React, { lazy } from "react";
import ReactDOM from "react-dom/client";
import "./index.scss";
import App from "./App";
import ErrorPage from "./error-page";
import Loading from "./components/loading";

import { createHashRouter, RouterProvider } from "react-router-dom";
import Layout from "./LayOut/LayOut";

import {
  DesktopOutlined,
  PieChartOutlined,
  UserOutlined,
} from "@ant-design/icons";

const MyTable = lazy(() => import("./components/MyTable/MyTable"));
const MyTable2 = lazy(() => import("./components/MyTable2/MyTable2"));
const Map = lazy(() => import("./components/Map/index"));
const RenderSchema = lazy(() => import("./components/RenderSchema/index"));
const ParseStringToComponent = lazy(() => import("./components/ParseStringToComponent/index"));


// const Layout = lazy(() => import("./LayOut/LayOut"));

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
const router = createHashRouter([
  {
    path: "/",
    id: "首页",
    element: <App />,
    hydrateFallbackElement: <PieChartOutlined />,
    errorElement: <ErrorPage />,
  },
  {
    path: "/layout",
    id: "布局",
    element: <Layout />,
    hydrateFallbackElement: <UserOutlined />,
    children: [
      {
        path: "tab1",
        id: "我的表格",
        element: <MyTable />,
        hydrateFallbackElement: <UserOutlined />,
      },
      {
        path: "tab2",
        id: "我的表格2",
        element: <MyTable2 />,
        hydrateFallbackElement: <DesktopOutlined />,
      },
      {
        path: "map",
        id: "地图",
        element: <Map />,
        hydrateFallbackElement: <DesktopOutlined />,
      },
      {
        path: "renderSchema",
        id: "JSON渲染Schema",
        element: <RenderSchema />,
        hydrateFallbackElement: <DesktopOutlined />,
      },
      {
        path: "parseStringToComponent",
        id: "string渲染组件",
        element: <ParseStringToComponent />,
        hydrateFallbackElement: <DesktopOutlined />,
      },
    ],
  },
]);
root.render(
  <>
    <RouterProvider router={router}></RouterProvider>
    <Loading />
  </>
  // <React.StrictMode>
  //   <App />
  // </React.StrictMode>
);
export default router;
